<template>
    <inner-layout v-loading="loading">

        <template slot="header"></template>

        <template>
            <div class="update-passwd-box">
                <el-form
                    class="form"
                    ref="form"
                    label-width="110px"
                    :model="formData"
                    :rules="rules"
                >
                    <el-form-item
                        label="旧密码"
                        prop="oldPasswd"
                    >
                        <el-input show-password
                            v-model="formData.oldPasswd"
                            placeholder="请输入旧密码"
                            auto-complete="off"
                        ></el-input>
                    </el-form-item>

                    <el-form-item
                        label="新密码"
                        prop="passwd"
                    >
                        <el-input show-password
                            v-model="formData.passwd"
                            placeholder="请输入6~18位新密码"
                            auto-complete="off"
                        ></el-input>
                    </el-form-item>

                    <el-form-item
                        label="确认新密码"
                        prop="confirmPasswd"
                    >
                        <el-input show-password
                            v-model="formData.confirmPasswd"
                            placeholder="请确认新密码"
                            auto-complete="off"
                        ></el-input>
                    </el-form-item>

                    <div class="form-btns">
                        <div class="btn">
                            <el-button
                                type="primary"
                                @click="save()"
                            >修改密码</el-button>
                        </div>
                    </div>

                </el-form>
            </div>
        </template>

    </inner-layout>
</template>

<script>
import { updatePasswd } from '@/api/user'

export default {
	name: 'UpdatePasswd',
	components: {

	},
	mixins: [],
	data() {
		return {
			loading: false,
			formData: {
				oldPasswd: '',
                passwd: '',
                confirmPasswd: ''
			},
            rules: {
            	oldPasswd: [
            		{ required: true, message: '请输入旧密码', trigger: 'blur' }
            	],
                passwd: [
                	{ required: true, message: '请输入6~18位的新密码', trigger: 'blur' },
                	{ min: 6, max: 18, message: '密码长度应为6~18位', trigger: 'change' }
                ],
                confirmPasswd: [
                	{ required: true, message: '请确认新密码', trigger: 'blur' }
                ]
            }
		}
	},
	created() {

	},
	methods: {
        save() {
            this.$refs.form.validate((valid) => {
            	if (valid) {
            		let params = this.formData
                    if (params['passwd'] != params['confirmPasswd']) {
                        this.$message.error('两次新密码不一致')
                        return
                    }
            		updatePasswd(params).then((res) => {
            			if (res.err_code === 0) {
            				this.$message.success(res.err_msg || '修改成功')
            			}
            		})
            	}
            })
        }
	}
}
</script>

<style lang="scss" scoped>
    .update-passwd-box {
        width: 550px;
        margin: 50px auto;
        padding: 30px;
    }
</style>
